<template>
  <div class="shipin1">
    <div class="shipin-item">
      <!-- v-for="(item,index) in shipinData" :key="index" -->
      <div style="padding: 10px 0 0 10px;">
        <img src="@/assets/images/lefticon.png" alt="" />
        <span>视频监控</span>
      </div>
      <div id="video">
        <monitorComponents  :shipinList="shipinData"></monitorComponents>
      </div>
    </div>
    <!-- <div class="shipin-item">
      <div style="padding: 10px 0 0 10px;">
        <img src="@/assets/images/lefticon.png" alt="" />
        <span>视频监控</span>
      </div>
      <div id="video">
        <monitorComponents  :shipinList="shipinData2"></monitorComponents>
      </div>
    </div> -->
  </div>
</template> 

<script>
import monitorComponents from "./components/monitorComponents.vue";
export default {
  components: {
    monitorComponents,
  },
  data() {
    return {
      shipinData:['5af56c3482274e97920373eea5957752','a501ac7ced244741b79728e3075a5341',
        'fd255a39418c4fbd91cdd74d9be3e666','eebb190892da406f817adb79f1fbf020','c8b427ed551c49bbbc29687283d6f776'
      ],
      shipinData1:['5af56c3482274e97920373eea5957752'],
      shipinData2:['a501ac7ced244741b79728e3075a5341'],
      shipinData3:['fd255a39418c4fbd91cdd74d9be3e666'],
      shipinData4:['eebb190892da406f817adb79f1fbf020'],
      shipinData5:['c8b427ed551c49bbbc29687283d6f776'],

    };
  },
};
</script>

<style scoped lang="scss">
.shipin1 {
  width: 100%;
  // height: 770px;
  overflow-y: auto;
  // border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .shipin-item{
    // width: 49%;
    // height: 370px;
    height: 700px;
    width: 99.9%;
    margin-bottom: 15px;
    background-color: #0b2c54;
  }
  #video{
    margin: 10px;
    // height: 320px;
    height: 96%;
  }
}
/*chrome滚动条颜色设置，纵向滚动条*/
*::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
</style>
<style lang="scss">
// .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 3px;
//   background: #1890ff; /* 修改滚动条颜色 */
// }
.el-select-dropdown__list {
  padding: 0 !important;
}
</style>